<!-- 设备监测 -->
<template>
  <view class="page-terminal" :class="{'backTransparent': selected}">
    <!-- v-show="!selected"  -->
    <view v-show="!selected" v-for="device in deviceList" :key="device.prop" class="deviceItem"
      @click="todeviceDetail(JSON.stringify(device))">
      <view class="title">
        <span class="titleIcon"></span>
        {{ device.equTypeName }}
        <image :src="`/static/manage/${device.impExp === 1 ? 'in' : 'out'}.png`" class="deviceType"></image>
        <span class="deviceNum">设备编号：{{device.equNo}}</span>
        <view class="right-tag">
          <!-- <span 
            v-for="void1 in voidList" 
            :key="void1.label" 
            class="tag" 
            :style="{'color': void1.textColor,'backgroundColor': void1.color,'display': void1.value === device.isVoid ? 'inline-block': 'none'}"
            >
            {{void1.label}}
          </span> -->
          <span v-for="status in statusList" :key="status.label" v-show="status.value === device.onlintStatus"
            class="tag"
            :style="{'color': status.textColor,'backgroundColor': status.color, 'display': status.value === device.onlintStatus ? 'inline-block': 'none'}">
            {{status.label}}
          </span>
        </view>
      </view>
      <view class="card-footer">
        <view class="installTime">
          关联{{villageType == 1 ? '接驳井':'终端'}} <span class="dateValue">{{ device.terminalName }}</span>
        </view>
        <view class="installTime">
          安装日期 <span class="dateValue">{{ device.installTime }}</span>
        </view>
      </view>
    </view>

    <DeviceDetail v-if="selected" :selectData="selectData" :villageType="villageType" />
  </view>
</template>

<script>
import DeviceDetail from './deviceDetail.vue';
import { getVillageEquList } from '@/api/manage'
export default {
  components: { DeviceDetail },
  props: {
    villageId: {
      type: String,
      default: ''
    },
    /**村庄类型：
     *  1-纳场村
     *  2-终端村
     */
    villageType: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      selected: false,
      selectData: {
        terminalName: ''
      },
      deviceList: [
        // {
        //   terminalName: '李家村终端1号', deviceNum: '2023293022121', status: 2, deviceType: 'in', deviceName: '液位传感器', installTime: '2024-10-21'
        // },
        // {
        //   terminalName: '李家村终端2号', deviceNum: '2023293022121', status: 1, deviceType: 'out', deviceName: '液位传感器', installTime: '2024-10-21'
        // },
        // {
        //   terminalName: '李家村终端1号', deviceNum: '2023293022121', status: 3, deviceType: 'in', deviceName: '液位传感器', installTime: '2024-10-21'
        // }
      ],
      statusList: [
        { label: '未激活', value: 1, color: '#FFFFE5', textColor: '#FBD94C' },
        { label: '在线', value: 2, color: '#D5EFE7', textColor: '#74CDAF' },
        { label: '离线', value: 3, color: '#E1E1E1', textColor: '#8E8E8E' },
        { label: '异常', value: 4, color: '#FFEBEF', textColor: '#FC8382' },
      ]
    }
  },
  watch: {
    villageId: {
      handler: function (val) {
        if (val) {
          console.log(val, '检测到村庄id')
          this.getVillageEquList(val)
        }
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    uni.$on('returnTerminal', (show) => {
      console.log('返回', show)
      this.selected = show.selected
    })
  },
  methods: {
    getVillageEquList(villageId) {
      getVillageEquList({ villageId }).then(({ data }) => {
        console.log(data, 'data-查询村庄下设备列表')
        this.deviceList = data.data
      })
    },
    todeviceDetail(device) {
      console.log(JSON.parse(device), '传参')
      this.selectData = JSON.parse(device)
      this.selected = true
    }
  }
}
</script>

<style lang="scss" scoped>
.backTransparent {
  background: transparent !important;
}
.page-terminal {
  color: #000;
  padding: 12rpx;
  // background: #fff;
  margin: 32rpx;
  border-radius: 10rpx;
  .deviceItem {
    // background: #f3f5f9;
    background: #fff;

    border-radius: 10rpx;
    padding: 16rpx 12rpx;
    margin-bottom: 16rpx;
    .deviceType {
      width: 24rpx;
      height: 24rpx;
      margin: 0 14rpx;
      vertical-align: middle;
    }
    .deviceNum {
      font-weight: 400;
      font-size: 18rpx;
      color: #989898;
      vertical-align: middle;
    }
    .title {
      position: relative;
      font-weight: 800;
      font-size: 28rpx;
      color: #4a4a4a;
      line-height: 40rpx;
      text-align: left;
      .titleIcon {
        display: inline-block;
        width: 8rpx;
        height: 20rpx;
        background: #2769f7;
        border-radius: 6rpx;
        opacity: 0.6;
        margin-right: 12rpx;
      }
      .right-tag {
        position: absolute;
        right: 0rpx;
        top: 0rpx;
        .tag {
          display: inline-block;
          padding: 2rpx 24rpx;
          border-radius: 6rpx;
          font-size: 24rpx;
          margin-right: 12rpx;
        }
      }
    }
    .card-footer {
      text-align: left;
      margin-left: 16rpx;
      margin-top: 12rpx;
      .installTime {
        // display: inline-block;
        font-weight: bold;
        font-size: 24rpx;
        color: #989898;
        line-height: 34rpx;
        background: #fff;
        border-radius: 6rpx;
        padding: 8rpx;
        .dateIcon {
          font-size: 22rpx;
          color: #989898;
        }
        .dateValue {
          color: #4a4a4a;
          margin-left: 16rpx;
          font-weight: 800;
        }
      }
    }
  }
}
</style>